<template>
	<view class="u-content">
		<view class="title">
			<text>{{ data.title }}</text>
		</view>
		<view class="content">
			<jyfParser :html="data.content" ref="article"></jyfParser>
		</view>
		<drag-button :isDock="true" :existTabBar="true" @btnClick="collect" :distance="distance" >
			<view slot="centent">
				<view class="collect">
					<image src="../../static/matter/icon_start.png" v-if="data.isCollection == 0"></image>
					<image src="../../static/noCollect.png" v-if="data.isCollection == 1"></image>
					<text>收藏</text>
				</view>
			</view>
		</drag-button>
	</view>
</template>

<script>
	import dragButton from '@/components/drag-button/drag-button.vue';
	import jyfParser from '@/components/jyf-parser/jyf-parser';
	export default {
		data() {
			return {
				distance: uni.upx2px(200),
				id: '',
				data:{},
			}
		},
		components: {
			dragButton,
			jyfParser
		},
		computed: {
			topNum() {
				return uni.upx2px(980);
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.policyDetails()
		},
		methods: {
			collect(){
				this.insertOrRemoveMyCollection();
			},
			insertOrRemoveMyCollection(){
				let data = {
					policyId:this.id,
					qyUuid:1234
				}
				this.$ajax({
					url: '/api/news/zwCollection/insertOrRemoveMyCollection',
					needAuth: true,
					contentType:'application/json;charset=utf-8',
					data: JSON.stringify(data),
				}).then(res => {
					if (res.code == 200) {
						if(this.data.isCollection == 1){
							uni.showToast({
								title: '取消收藏',
								icon: 'none'
							});
							this.$set(this.data,'isCollection',0)
							return false
						}
						if(this.data.isCollection == 0){
							uni.showToast({
								title: '收藏成功',
								icon: 'none'
							});
							this.$set(this.data,'isCollection',1)
							return false
						}
					}
				})
			},
			policyDetails(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				this.$ajax({
					url: '/api/news/zwNewsPolicy/policyDetails',
					needAuth: true,
					data: {
						id: this.id,
						qyUuid:1234
					}
				}).then(res => {
					if (res.code == 200) {
						this.data = res.data;
					}
				}).finally(() => {
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-content {
		padding: 0 20rpx;

		.title {
			padding: 20rpx 80rpx;
			font-size: 42rpx;
			color: #333333;
			text-align: center;
		}

		.content {
			padding: 0 30rpx;
			padding-bottom: 40rpx;
		}

		.preface {
			font-family: PingFang-SC-Medium;
			font-size: 20rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 44rpx;
			letter-spacing: 0rpx;
			color: #666666;
			text-align: center;
		}

		.collect{
			image{
				height: 32rpx;
				width: 32rpx;
			}
			text{
				font-size: 24rpx;
				color: #5b96ff;
			}
			height: 90rpx;
			width: 90rpx;
			border-radius: 50%;
			border: 1rpx solid #5b96ff;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background: #FFFFFF;
		}
	}
</style>
